"use client";
import { useTranslations} from 'next-intl';
import React, { useState, useCallback } from "react";
import Image from "next/image";
import { Carousel } from "antd";

interface Slide {
  src: string;
  alt?: string;
  title?: string;
  date: string;
}

interface ImageCarouselProps {
  slides: Slide[];
  onViewMore?: () => void;
}

const ImageCarousel: React.FC<ImageCarouselProps> = ({
  slides = [],
  onViewMore,
}) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const t = useTranslations('index');
  if (slides.length === 0) {
    return <div className="text-center p-4">No slides to display</div>;
  }
  const title = t('News')
  return (
    <div style={{ width: "70%", marginLeft: 'auto', marginRight: 'auto', marginTop: '80px'}}>
      <h2 style={{textAlign: 'center'}}>
        {title}
        </h2>
      <Carousel autoplay arrows infinite={false}>
        {slides.map((slide, index) => (
          <div key={index} className="relative w-full">
            <img
              style={{ width: "100%" }}
              className="w-full"
              src={slide.src}
              alt={slide.alt || `Slide ${index + 1}`}
            />
            <div style={{marginTop: '20px'}}>
              <div className="date">{slide.date}</div>
              <div className="title" style={{fontSize: '17px'}}>{slide.title}</div>
            </div>
          </div>
        ))}
      </Carousel>
    </div>
  );
};

export default ImageCarousel;
